import * as echarts from '../ec-canvas/echarts';

function rpxTopx(rpx) {
  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
  let px = (deviceWidth / 750) * Number(rpx)
  return Math.floor(px);
} 

function pxTorpx(px) {
  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
  let rpx = (750 / deviceWidth) * Number(px)
  return Math.floor(rpx);
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    options: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.options)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.options)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'options': function(val){
      this.initchart(val)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(options){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-radar');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
        })
        // echart表格的内容配置
        var option = {
          grid: {
            left: 10,
            right: 30,
            bottom: 30,
            containLabel: true,
            show: true, //是否显示直角坐标系网格。
            backgroundColor: options.bgColor ? options.bgColor : 'transparent'
          },
          // title: {
          //   text: options.title,
          //   textStyle: {
          //     fontSize: rpxTopx(36)
          //   },
          //   // padding: [20, 15], //标题内边距
          //   left: '2%',
          // },
          xAxis: {
            type: 'category',
            // boundaryGap: false, //坐标轴两边留白策略
            axisTick: {
              alignWithLabel: true, //证刻度线和标签对齐
              inside: true, //坐标轴刻度是否朝内，默认朝外
              interval: 0, //坐标轴刻度的显示间隔
            },
            axisLine: {
              show: true, //坐标轴
              lineStyle: {
                color: options.bgColor ? options.bgColor : 'transparent'
              }
            },
            axisLabel: {
              show: true, // 显示刻度标签
              fontSize: rpxTopx(24),
              color: '#000',
              margin: rpxTopx(20),
            },
            // interval: 3,
            // max: 6,
            // min: 0,
            data: options.xLabel
          },
          yAxis: {
            type: 'value',
            // name: '严重度',
            nameMap: rpxTopx(20), //坐标轴名称与轴线之间的距离。
            splitNumber: options.splitNumber ? options.splitNumber : 5 , //坐标轴的分割段数
            axisTick: {
              inside: true, //坐标轴刻度是否朝内，默认朝外
            },
            nameTextStyle: {
              fontSize: rpxTopx(24), //坐标轴名称文字的字体大小。
            },
            axisLabel: {
              show: true, // 显示刻度标签
              fontSize: rpxTopx(24),
              color: '#000',
              margin: rpxTopx(20),
              // // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
              formatter:function(params){
                params = options.number2text(params);
                var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params.length;// 实际标签的字数
                var provideNumber = 2;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";// 表示每一次截取的字符串
                    var start = p * provideNumber;// 开始截取的位置
                    var end = start + provideNumber;// 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;// 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线
              show: true,  // 显示网格线
              lineStyle: {
                type: 'dashed',  //dotted  dashed solid
                color: '#fff'
              }
            },
            axisLine: {
              show: true, //坐标轴
              lineStyle: {
                color: options.bgColor ? options.bgColor : 'transparent'
              }
            },
          },
          label: {
            show: true,
            // 标签内容格式器： 1、字符串模板 2、回调函数  均支持用\n换行
            // 1、字符串模板： 
              // {a}：系列名。
              // {b}：数据名。
              // {c}：数据值。
              // {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
              // {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数
            // 2、回调函数
            formatter: function(value){
              if (options.isNeedNum2Text) {
                return options.number2text(value.data)
              }else{
                return value.data + '%'
              }
            }
          },
          series: [
            {
              type: 'line',
              color: options.color ? options.color : 'blue',
              symbolSize: rpxTopx(20), //单个数据标记的大小
              smooth: options.smooth ? options.smooth : false,
              data: options.data,
              // areaStyle: {}
            }
          ],
          animation: options.animation ? options.animation : true //默认开启动画，可关闭
        };
        if (!options.isNeedNum2Text) {
          option.yAxis.min = 0
          option.yAxis.max = 100
          option.series[0].areaStyle = {
            // color: 'rgba(0, 0, 0, 0.5)',
            opacity: 0.4
          }
        }
        chart.setOption(option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})
